import { Col, Row } from 'antd';
import ChargeIcon from '@/assets/icons/charge-icon.png';
import './index.scss';
import React, { useEffect, useState } from "react";
import { get_platform_trade } from '@/utils/mixin.ts'
import qwfhzl from '@/assets/new/qwfhzl.png'
import fhdzl from '@/assets/new/fhdzl.png'
import qwzjyl from '@/assets/new/qwzjyl.png'
const PlatformData = () => {
    const [platformData, setPlatformData] = useState([{ total_reward: 0, total_share_points: 0, trade_volume: 0 }]); 
        // useEffect 第二个参数为空数组表示仅在组件挂载时执行
        useEffect(() => {
            // 这里是 componentDidMount 的逻辑
            // console.log("Component is mounted");
            // const res = get_platform_trade({currency: 'BNB'})
            
            // 如果有清理逻辑，例如清理定时器，可以在这里添加
            // return () => {
            //   console.log("Component will unmount");
            //   // 清理逻辑
            // };
            const fetchData = async () => {
                try {
                    const res = await get_platform_trade({ currency: 'BNB' });
                    setPlatformData(res.data);

    
                } catch (error) {
                    console.error("Error fetching data:", error);
                }
            };
    
            fetchData(); // 组件挂载时执行一次
    
          }, []);
    return (
        <div className="platform-data-pc">
            <div className="data_title">平台数据</div>
            <div className="data">
                <Row>
                    <Col span={24} className="profit-container">
                        <Row className="profit-container-item">
                            <Col  className="charge-image-box-img">
                                <img src={qwfhzl} className="charge-image" alt="" />
                            </Col>
                            <Col xl={16} lg={24} md={24} className="profit">
                                <span className="profit_top">{platformData.length ?platformData[0].total_reward : ''}</span>
                                <span className="profit_bottom">全网分红总量</span>
                            </Col>
                        </Row>
                    </Col>

                    <Col span={24} className="profit-container">
                        <Row className="profit-container-item">
                            <Col  className="charge-image-box-img">
                                <img src={fhdzl} className="charge-image" alt="" />
                            </Col>
                            <Col xl={16} lg={24} md={24} className="profit">
                                <span className="profit_top">{platformData.length ? platformData[0].total_share_points : ''}</span>
                                <span className="profit_bottom">分红点总量</span>
                            </Col>
                        </Row>
                    </Col>

                    <Col span={24} className="profit-container">
                        <Row className="profit-container-item">
                            <Col  className="charge-image-box-img">
                                <img src={qwzjyl} className="charge-image" alt="" />
                            </Col>
                            <Col xl={16} lg={24} md={24} className="profit">
                                <span className="profit_top">{platformData.length ? platformData[0].trade_volume : ''}</span>
                                <span className="profit_bottom">全网总交易量</span>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
    );
};

export default PlatformData;
